<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>颜色对照表3</title>
		<script src="./color3.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/copy.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#table {
			    margin: 30px auto;
			    border-collapse: collapse;
			    border: none;
			}
			#table td {
			    width: 120px;
			    text-align: center;
			    padding: 10px 15px;
			}
			#table .title {
			    font-size: 26px;
			    padding-bottom: 10px;
			}
			#tbody td {
			    cursor: pointer;
			}
			#tbody tr:nth-child(6n+1), #tbody tr:nth-child(6n+2), #tbody tr:nth-child(6n+3) {
			    color: #FFFFFF;
			}
			#tbody tr:nth-child(6n+4), #tbody tr:nth-child(6n+5), #tbody tr:nth-child(6n+6) {
                color: #000000;
            }
		</style>
	</head>
	<body>
	    <table id="table" border="1" cellspacing="0" cellpadding="0">
	        <caption class="title">颜色对照表3</caption>
	    	<tbody id="tbody"></tbody>
	    </table>
	    <script type="text/javascript">
	        var tdList = [];
	    	for (var i = 0; i < color3.length; i = i + 6) {
	    	    tdList.push('<tr> <td>' + color3[i] + '</td> <td>' + color3[i + 1] + '</td> <td>' + color3[i + 2] + '</td>');
	    	    tdList.push('<td>' + color3[i + 3] + '</td> <td>' + color3[i + 4] + '</td> <td>' + color3[i + 5] + '</td> </tr>');
	    	}
	    	$('#tbody').html(tdList.join(''));
	    	$('#tbody td').map(function () {
	    	    $(this).css('background', '#' + $(this).text());
	    	});
	    	$('#tbody td').click(function () {
                copy('#' + $(this).text());
            });
	    </script>
	</body>
</html>
